<template>
  <!-- 在线支付 -->
  <div class="OnlinePayment">
    <div class="orderMsg">
      <div class="left">
        <div class="top">
          <div>订单提交成功，请尽快支付</div>
          <div>订单号：{{orderData.outTradeNo}}</div>
        </div>
        <div class="bottom">
          请在
          <span style="color:red">{{timeData}}</span> 内完成支付，否则订单会被自动取消...
        </div>
      </div>
      <div class="right">
        <p>
          应付金额：
          <span style="color:red">{{orderData.totalAmount}}</span>元
        </p>
      </div>
    </div>
    <div class="codeShow">
      <div class="codeBox">
        <!-- 显示二维码 -->
        <div id="qrcode" ref="qrCodeUrl"></div>
        <div class="wxWay">
          <img src="../assets/wx.png" alt />
          <span>请打开微信扫一扫进行支付</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入qrcode
import QRcode from "qrcodejs2";
export default {
  props: ["orderData"],
  data() {
    return {
      timeData: "",
      m: 29,
      s: 59,
      codeUrl: "", // 记录微信支付url
    };
  },

  created() {
    // 计时器调用
    this.time = setInterval(() => {
      this.countDown();
    }, 1000);
    // 获取微信支付的url
    this.bus.$on("code", (data) => {
      console.log(data);
      // 调用生成二维码的方法传入url
      this.$nextTick(() => {
        this.creatQrCode(data);
      });
    });
  },
  methods: {
    // 倒计时
    countDown() {
      --this.s;
      if (this.s < 0) {
        --this.m;
        this.s = 59;
      }
      if (this.m < 0) {
        --this.h;
        this.m = 59;
      }
      this.timeData = this.m + "分" + this.s + "秒";
    },
    // 生成二维码
    creatQrCode(code) {
      console.log(code + "===");
      var qrcode = new QRcode(this.$refs.qrCodeUrl, {
        width: 150,
        height: 150,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRcode.CorrectLevel.H,
      });
      qrcode.makeCode(code);
      // console.log(qrcode);
    },
  },
  destroyed() {
    console.log("销毁计时器");
    clearInterval(this.time);
  },
};
</script>
<style scoped>
.orderMsg {
  width: 1100px;
  margin-left: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 15px;
  /* background-color: #eee; */
}
.orderMsg div {
  line-height: 30px;
}

.top {
  display: flex;
}
.top div:nth-of-type(2) {
  margin-left: 60px;
}
.right {
  display: flex;
  width: 300px;
  justify-content: space-between;
}
.bottom {
  text-align: left;
}
.codeShow {
  width: 100%;
  height: 500px;
  border: 1px solid;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.codeBox {
  width: 300px;
  margin: 0 auto;
}
#qrcode {
  margin: 0 auto;
}
.wxWay {
  display: flex;
  align-items: center;
  margin-top: 20px;
  position: relative;
  left: -50px;
}
.wxWay img {
  width: 40px;
}
</style>